<template>
  <div class="NTable">
    <div :class="{'tab--item':true,active:tabIndex === index}" v-for="(item,index) in options" :key="index" @click="itemClick({item,index})">
        {{item.label}}
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue,Prop,Emit} from 'vue-property-decorator';

@Component
export default class NTab extends Vue {
  private tabIndex:number | string = 0;
  @Prop()
  private options!: any;

  @Emit('click')
  itemClick(item: any){
    this.tabIndex = item.index;
    return item
  }
}
</script>
<style lang="scss" scoped>
.NTable {
  display: flex;
  align-items: center;
  gap: 18px;
  .tab--item{
    color: #006400;
    font-weight: bold;
    font-size: 14px;
    padding-bottom: 6px;
    cursor: pointer;
    border-bottom: 2px solid #ffffff;
    &.active{
      border-bottom: 2px solid #006400;
    }
  }
}
</style>
